import React, { useState,useEffect } from 'react';
import { CapsuleTabs } from 'antd-mobile';
import '../css/list.css'
import { useHistory } from "react-router-dom";
import request from "../utils/request";

export default ()=>{
    const [umenu,setumenu] = useState([]);
    const [umenu2,setumenu2] = useState([]);
    const history = useHistory();

    const getmenu = async ()=>{
        const { data } = await request.post(`/getAllmessage`,{
            type:'最新下载'
        })
        setumenu(data.data)
    }

    const timetxt = (time)=>{
        time = time.slice(0,10);
        return time;
    }

    useEffect(()=>{
        getmenu();
    },[]);



    const getmenu2 = async ()=>{
        const { data } = await request.post(`/getAllmessage`,{
            type:'最新发布'
        })
        setumenu2(data.data)
    }

    const timetxt2 = (time)=>{
        time = time.slice(0,10);
        return time;
    }

    useEffect(()=>{
        getmenu2();
    },[]);


    return (
        <div style={{width:'100%'}}>
            <CapsuleTabs>
                <CapsuleTabs.Tab title='最新下载' key='1'>
                    <section>
                        {
                            umenu.map((res)=>(
                                <div className='box' key={res._id} onClick={()=> history.push('/detail?id='+res._id)}>
                                    <img src={res.cover}/>
                                    <div className='box2'>
                                        <h3>{res.title}</h3>
                                        <div className='box3'>
                                            <span className='span1'>{res.author}</span>
                                            <span className='span2'>{timetxt(res.createdAt)}</span>
                                        </div>

                                    </div>
                                </div>
                            ))
                        }

                    </section>
                </CapsuleTabs.Tab>
                <CapsuleTabs.Tab title='最新发布' key='2'>
                    <section>
                        {
                            umenu2.map((res)=>(
                                <div className='box' key={res._id} onClick={()=> history.push('/detail?id='+res._id)}>
                                    <img src={res.cover}/>
                                    <div className='box2'>
                                        <h3>{res.title}</h3>
                                        <div className='box3'>
                                            <span className='span1'>{res.author}</span>
                                            <span className='span2'>{timetxt2(res.createdAt)}</span>
                                        </div>

                                    </div>
                                </div>
                            ))
                        }

                    </section>
                </CapsuleTabs.Tab>
                <CapsuleTabs.Tab title='最新下载' key='3'>
                    <section>
                        {
                            umenu.map((res)=>(
                                <div className='box' key={res._id} onClick={()=> history.push('/detail?id='+res._id)}>
                                    <img src={res.cover}/>
                                    <div className='box2'>
                                        <h3>{res.title}</h3>
                                        <div className='box3'>
                                            <span className='span1'>{res.author}</span>
                                            <span className='span2'>{timetxt(res.createdAt)}</span>
                                        </div>

                                    </div>
                                </div>
                            ))
                        }

                    </section>
                </CapsuleTabs.Tab>
                <CapsuleTabs.Tab title='最新发布' key='4'>
                    <section>
                        {
                            umenu2.map((res)=>(
                                <div className='box' key={res._id} onClick={()=> history.push('/detail?id='+res._id)}>
                                    <img src={res.cover}/>
                                    <div className='box2'>
                                        <h3>{res.title}</h3>
                                        <div className='box3'>
                                            <span className='span1'>{res.author}</span>
                                            <span className='span2'>{timetxt2(res.createdAt)}</span>
                                        </div>

                                    </div>
                                </div>
                            ))
                        }

                    </section>
                </CapsuleTabs.Tab>
            </CapsuleTabs>
        </div>
    )
}